<template>
    <div class="base">
        <div  class="loginAndRegist">
           <!-- <div  class="loginArea">
                <template>
                    <img :src="imgUrl" class="logo" >
                </template>
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >



                    <div v-show="isShow" class="title">
                        系统登陆
                    </div>

                </transition>
                <transition
                        name="animate__animated animate__bounce"
                        enter-active-class="animate__fadeInUp"
                        leave-active-class="animate__zoomOut"
                        appear
                >
                    <div v-show="isShow" class="pwdArea">
                        <div style="flex: 1;justify-content: center;display: flex;align-items: center">
                            <el-input class="username" v-model="rules.username" style="width: 165px"  placeholder="用户名"></el-input>
                        </div>
                        <div style="flex: 1;justify-content: center;display: flex;align-items: center">
                            <el-input placeholder="密码"  v-model="rules.password" style="width: 165px" show-password></el-input>
                        </div>
                    </div>
                </transition>

            </div>
            -->

    <el-form
            :model="form"
            status-icon
            :rules="rules"
            ref="form"
            label-width="100px"
            class="login-container"
    >
        <template>
            <img :src="imgUrl" class="logo" >
        </template>
        <div v-show="isShow" class="title" >
            逸悟
        </div>
        <div class="name_passward">
        </div>
        <el-form-item
                label="用户名"
                label-width="70px"
                prop="username"
                class="username"
                padding="20px"
        >
            <el-input
                    type="input"
                    v-model="form.username"
                    autocomplete="off"
                    placeholder="请输入账号"
            >
            </el-input>
        </el-form-item>
        <el-form-item
                label="密码"
                label-width="70px"
                prop="password"
        >
            <el-input
                    type="password"
                    v-model="form.password"
                    autocomplete="off"
                    placeholder="请输入密码"
            ></el-input>
        </el-form-item>
        <el-form-item class="login_submit">
            <el-button type="success" round style="background-color: #257B5E;letter-spacing: 5px;margin-left:30px;" @click="login"  >登录</el-button>
        </el-form-item>

    </el-form>
        </div>
    </div>
</template>

<script>
//import Mock from 'mockjs'
import {getMenu} from '../../../api/data'
export default {
    name: "Login",
    data() {
        return {
            form: {},
            rules: {
                username: [
                    { required: true, message: "请输入用户名", trigger: "blur" },
                    {
                        min: 3,
                        message: "用户名长度不能小于3位",
                        trigger: "blur",
                    },
                ],
                password: [{ required: true, message: "请输入密码", trigger: "blur" }],
            },
            isShow:true,
            imgUrl:require('../../assets/images/img.png')
        };
    },
    methods:{
        login() {
            getMenu(this.form).then(res => {
                console.log(res,'res');
                if(res.code === 20000){
                    this.$store.commit('clearMenu')
                    this.$store.commit('setMenu', res.data.menu)
                    this.$store.commit('setToken', res.data.token)
                    this.$store.commit('addMenu', this.$router) //动态添加路由
                    this.$router.push({name: 'home'})
                }else{
                    this.$message.warning(res.data.message)
                }
            })
            //使用mock生成随机数
            /* const token = Mock.random.guid()
            this.$store.commit('setToken', token)
            this.$router.push({name: 'home'}) */
        }
    }
};
</script>

<style lang="less" scoped>
.base{
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("../../assets/images/background.png");
  background-size: 100%;
}
.login-container {
  border-radius: 15px;
  // 背景裁剪的内边距
  background-clip: padding-box;
  margin: 80px auto;
  width: 400px;
  height: 400px;
  padding: 35px 35px 15px 35px;
  background-color: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
.login_title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
.login_submit {
  margin: 10px auto 0 auto;
  color: #FFFFFF;
}
.loginAndRegist{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;

}
.title{
  width: 70%;
  flex:1;
  margin-left: 55px;
  padding : 15px;
  border-bottom: 1px solid #257B5E;
  display: flex;
  color: #257B5E;
  font-weight: bold;
  font-size: 24px;
  justify-content: center;
}
.loginArea{
  background-color: rgba(255,255,255,0.8);
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
  height: 400px;
  width: 350px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
}
.logo{
  position: relative;
  margin-left:145px;
  width: 50px;
  height: 50px;

}
.pwdArea{
  width: 100%;
  flex:2;
  display: flex;
  flex-direction: column;
}
.pwdArea input{
  outline: none;
  height: 30%;
  border-radius:13px ;
  padding-left: 10px;
  font-size: 12px;
  border: 1px solid gray;
}
.pwdArea input:focus{
  border: 2px solid #257B5E;
}
.name_passward{
  height: 45px;
  margin-right: 0px;
}
</style>
